<%--
  Created by IntelliJ IDEA.
  User: xiaohuang
  Date: 2022/1/2
  Time: 22:17
  To change this template use File | Settings | File Templates.
--%>
<%@page import="java.sql.*"%>
<%@ page contentType="text/html;charset=UTF-8" language="java"  import="hzh.Movies" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>movieStore</title>
    <style type="text/css">
        .clear{
            clear:both;
        }

        #top_left{
            width:300px;
            float: left;
        }
        #top_right{
            width:400px;
            float: right;
            margin-top:15px;
            font-size: 13px;
        }
        #top_right img{
            margin-bottom: -5px;
        }
        #top_right a{
            text-decoration: none;
            color:#06F;
        }
        #top_right a:hover{
            color:#909;
        }
        #menu{
            background-color: #1C3F09;
            border-top:5px solid #82B211;
            padding: 10px 0px;
            text-align: center;
        }
        #menu a{
            margin: 0 8px;
            color: #fff;
            text-decoration: none;
            font-weight: bold;
            font-size: 15px;
        }
        #menu a:hover{
            color: #999;
        }
        #menu .all{
            color: yellow
        }
        #search{
            background-color: #B6B684;
            padding:7px 0;
            text-align: right;

        }
        #search input[type='image']{
            /* margin-top: 5px; */
            margin-right: 250px;
            margin-bottom: -4px;
        }
        #search input[type='text']{
            height: 16px;
            border:1px solid #999;
        }

        /*-------------------------------------------------------*/

        #content{
            width:900px;
            margin:8px auto 15px;/*auto div居中*/
        }

        #content_top{
            text-align: right;
            font-size:13px;
        }
        #content_bottom{
            border:1px solid #999;
            background-color: #FCFDEF;
            padding:10px 15px;
        }
        #content_bottom h1{
            font-size: 15px;
            display: inline;
        }
        #content_bottom span{
            font-size: 13px;
        }
        #productlist_img img{
            width: 100%;
        }
        .movie{
            float: left;
            width: 25%;
            text-align: center;
            padding:10px 0px;
        }
        .movieimg img{
            width: 130px;
            height: 196px;
        }
        #jumpPage{
            text-align: center;
            margin: 10px;
        }
        #jumpPage a{
            padding:2px 6px;
            border: 1px solid #9AAFE5;
            text-decoration: none;
            color:#9AAFE5;
        }
        #jumpPage a:hover{
            color:#2B66A5;
            border: 1px solid #2B66A5;
        }
        .current{
            background-color: blue;
        }

        /*-------------------------------------------------------*/

        #bottom{
            background-color: #EFEEDC;
            height:60px;
            padding:10px 0px;
        }

        #bottom_left{
            width: 400px;
            float: left;
            margin-left: 200px;
        }
        #bottom_right{
            width: 500px;
            float: left;
            line-height:28px;/*行高*/
        }

    </style>
</head>
<body>
<div id="page">
    <div id="top">
        <div id="top_left">
            <img alt="" src="picture/dianyin.png" style="width: 100%">
        </div>
        <div id="top_right">
            <a href="#">帮助中心</a>|
            <a href="./register.jsp">用户注册</a>|
            <a href="#">用户登录</a>|
            <a href="./login.jsp">管理员登录</a>
        </div>
    </div>
    <div class="clear"></div>
    <div id="menu">
        <a href="#">冒险</a>
        <a href="#">悬疑</a>
        <a href="#">动画</a>
        <a href="#">爱情</a>
        <a href="#">喜剧</a>
        <a href="#">科幻</a>
        <a href="#">欧美</a>
        <a href="#">港台</a>
        <a href="#">大陆</a>
        <a href="#">其他地区</a>
        <a href="#">-2000</a>
        <a href="#">2001-2015</a>
        <a href="#">2015-2018</a>
        <a href="#">2018-</a>
        <a class="all" href="#">全部目录</a>
    </div>
    <div id="search">
        <form action="./SearchMoviesServlet" method="POST" >
            <input type="text" name="name"/>
            <input type='submit' value="搜索电影">
        </form>
    </div>
    <div id="content">
        <div id="content_top">
            <span>首页 > 动画 > 电影列表 </span>
        </div>
        <div id="content_bottom">
            <h1>电影展区</h1>
            <hr/>
            <h1>冒险类</h1>
            <span>共100个该类型电影</span>
            <hr/>
            <div id="productlist">
                <%
                    Class.forName("com.mysql.cj.jdbc.Driver");
                    Connection conn = (Connection) DriverManager.getConnection("jdbc:mysql://localhost:3306/MyDB", "root",
                            "5201314huang");
                   Statement stm = (Statement) conn.createStatement();
                   ResultSet rs = stm.executeQuery("select name ,actors,score,pic from movies");
                %>
                <div id="productlist_img">
                    <img alt="" src="" width="100%">
                </div>
                <div id="movielists">
                    <%
                        int i=0;
                        //遍历结果
                        while (rs.next() && i<4) {
                            i++;
                    %>
                    <div class="movie">
                        <div class="movieimg">
                            <img alt="" src="<%=rs.getString(4)%>" width="100%">
                        </div>
                        <div class="movieIntr">
                            <span>电影： <td><%=rs.getString(1)%></td></span><br/>
                            <span>演员：<td><%=rs.getString(2)%></td></span>
                            <span>评分：<td><%=rs.getString(3)%></td></span>
                        </div>
                    </div>
                    <%
                        }
                    %>
                    <div class="clear"></div>
                    <div id="jumpPage">
                        <a href="#">上一页</a>
                        <a class="current" href="./list1.jsp">1</a>
                        <a href="./list2.jsp">2</a>
                        <a href="list3.jsp">3</a>
                        <a href="list4.jsp">4</a>
                        <a href="list5.jsp">5</a>
                        <a href="#">6</a>
                        <a href="#">7</a>
                        <a href="#">下一页</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="bottom">
        <div id="bottom_left">
            <img alt="" src="">
        </div>
        <div id="bottom_right">
            <span>CONTACT US</span><br/>
            <span>copyright 2021 &copy; striner All Rights RESERVED</span>
        </div>
    </div>
</div>
</body>
</html>


